<script lang="ts" setup>
import Filter from "./Filter.vue";
import { ref } from "vue";
// import { filterOpt } from "./FilterCondition.ts";
import { filterOpt } from "../../../utils/ts/FilterCondition";
import { useRouter } from "vue-router";

const data = ref(filterOpt);

const order = ref(0);

const current = ref(0);

const cardInfo = ref([
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
  {
    //...
  },
]);

const router = useRouter()
const toDetail = () => {
  router.push({
    path: '/index/merchandiseDetail'
  })
};
</script>
<template>
  <div class="container">
    <div class="w-full pb-5"></div>
    <Filter class="mt-4" :filter-opt="data" />
  </div>
  <div class="flex h-20 items-center text-sm bg-gray-100 mt-5 mb-5">
    <div class="container">
      <span class="pr-5 cursor-pointer" @click="order = 0" :class="order === 0 ? 'text-blue-600' : ''">
        默认排序
      </span>
      <span @click="order = 1" :class="order === 1 ? 'text-blue-600  cursor-pointer' : ''">
        按更新时间
      </span>
    </div>
  </div>

  <div class="container flex flex-wrap">
    <a-card hoverable v-for="_ in cardInfo" class="mb-5 mr-5 card" @click="toDetail">
      <template #cover>
        <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
      </template>
      <a-card-meta title="商品名称。。。">
        <template #description>
          <p>商品描述。。。。。。。。。。</p>
        </template>
      </a-card-meta>
    </a-card>
  </div>

  <div class="w-full pb-20"></div>
  <div class="w-full flex items-center justify-center">
    <a-pagination v-model:current="current" :total="500" />
  </div>

  <div class="w-full pb-20"></div>
</template>
<style lang="scss" scoped>
@import "../../../utils/scss/global.scss";

.container {
  width: $center;
  margin: 0 auto;
}

.card {
  width: 260px;
}

@include mobile {
  .container {
    width: 100vw;
    padding-left: 20px;
    padding-right: 20px;
  }

  .ant-card {
    margin-right: 0;
  }

  .card {
    width: 100%;
  }
}
</style>
../../../utils/ts/FilterCondition.ts
